<template>
    <div>
        <Title title="商品分类">
            <el-button type="default" @click="() => { dialogTableVisible = true }">添加分类</el-button>
        </Title>
        <el-table :data="tableData" style="width: 100%;margin-top: 20px;" border="true">
            <el-table-column label="序号" width="317">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="分类名" width="317">
                <template #default="scope">
                    <div style="display: flex; align-items: center" v-show="editFlag[scope.$index] == 0">
                        <span style="margin-left: 10px">{{ scope.row.cateName }}</span>
                    </div>
                    <!-- 点击编辑 显示input框 -->
                    <el-input v-model="scope.row.cateName" style="width: 240px"
                        v-show="editFlag[scope.$index] == 1"></el-input>
                </template>
            </el-table-column>
            <!-- 是否启用 -->
            <el-table-column label="是否启用">
                <template #default="scope">
                    <el-switch v-model="scope.row.state" :active-value=1 :inactive-value=0
                        style="--el-switch-on-color: #13ce66" :disabled="editFlag[scope.$index] == 0" />
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="normal" @click="handleEdit(scope.$index, scope.row)"
                        v-if="editFlag[scope.$index] == 0">
                        编辑
                    </el-button>
                    <el-button size="normal" type="success" v-else="editFlag[scope.$index]==1"
                        @click="handleSave(scope.row)">
                        完成
                    </el-button>
                    <el-button size="normal" type="danger" @click="handleDelete(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination :total="total" @changePage="getList" style="margin-top: 5px;"></Pagination>

        <!-- 添加分类弹框 -->
        <el-dialog v-model="dialogTableVisible" title="添加商品分类" width="500">
            <el-form :model="addTypeForm">
                <el-form-item label="商品分类名" :label-width="formLabelWidth">
                    <el-input v-model="addTypeForm.cateName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="是否启用" :label-width="formLabelWidth">
                    <template #default="scope">
                        <el-switch v-model="addTypeForm.state" :active-value=1 :inactive-value=0
                            style="--el-switch-on-color: #13ce66"  />
                    </template>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogTableVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogTableVisible = false, addType()">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>

<script setup>
import { ref } from 'vue';
import Title from '@/views/home/component/Title.vue';
import Pagination from '@/views/home/component/Pagination.vue';
import { getGoodsTypeList, updateGoodsType, deleteGoodsType, addGoodsType } from '@/api/goods.js';
import { ElMessage } from 'element-plus';
const editFlag = ref([0]); //0 没有编辑 1点击编辑

//获取商品类型列表
const tableData = ref([]);
const total = ref(0);
const dialogTableVisible = ref(false)
const formLabelWidth = '140px'
const addTypeForm = ref({
    cateName: '',
    state: null
});//添加商品类型表单

//当前页
let currentPage1 = 1;
//默认没有条数
let pageSize1 = 5;

//获取列表函数
const getList = async (currentPage, pageSize) => {
    //修改当前页和条数
    currentPage1 = currentPage;
    pageSize1 = pageSize;
    //发送请求
    const res = await getGoodsTypeList({ currentPage, pageSize });
    //修改总页数
    total.value = res.total;
    //修改商品类型列表
    tableData.value = res.data;
    editFlag.value = new Array(res.data.length).fill(0);
    console.log(tableData.value);
}
getList(currentPage1, pageSize1);

//点击编辑
const handleEdit = (index, row) => {
    editFlag.value[index] = 1;
}
//点击完成
const handleSave = async (row) => {
    const data = {
        id: row.id,
        cateName: row.cateName,
        state: row.state
    }
    const { code, msg } = await updateGoodsType(data);
    if (code === 0) {
        ElMessage.success(msg);
        editFlag.value = new Array(tableData.value.length).fill(0);
    } else {
        ElMessage.error(msg);
    }
}

//点击删除
const handleDelete = async (row) => {
    console.log(row);
    const { code, msg } = await deleteGoodsType({ id: row.id });
    if (code === 0) {
        ElMessage.success(msg);
        getList(currentPage1, pageSize1);
    } else {
        ElMessage.error(msg);
    }
}
//添加分类
const addType = async () => {
    const { code, msg } = await addGoodsType(addTypeForm.value);
    if (code === 0) {
        ElMessage.success(msg);
        addTypeForm.value = { cateName: "", state: null };
        getList(currentPage1, pageSize1);
    } else {
        ElMessage.error(msg);
    }
}

</script>

<style scoped></style>